<template>
  <el-form-item>
    <el-table
        :data="projectExperience.data"
        style="width: 100%"
        highlight-current-row
    >
      <!-- 列-->
      <el-table-column
          v-for="(headDataItem, index) in projectExperience.headData"
          :key="index"
          :label="headDataItem.titleName"
          align="center"
          width="380">
        <!-- 占位插槽 ----- 自定义列的显示内容
        Vue3 中使用 #default="scope" 取代了 Vue2 的 slot-scope="scope"
        通过 Scoped slot 可以获取到 row, column, $index 和 store（table 内部的状态管理）的数据
        row 是 scope 的内置属性，应该还会有column, $index 等内置属性
        scope 并不是代表着 table，可以将scope.row理解为一个整体
        scope相当于一行的数据， scope.row相当于当前行的数据对象
        -->
        <template #default="scope">
          <!-- 第一列 时间-->
          <el-date-picker
              v-if="headDataItem.picker"
              v-model="scope.row.time"
              type="daterange"
              unlink-panels
              range-separator="至"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
              :picker-options="pickerOptions">
          </el-date-picker>
          <!-- 第二列 地点
          el-popover 的 :value="visible"属性已无法修改显示与隐藏
          -->
          <el-popover
              trigger="click"
              placement="top"
              v-if="headDataItem.popover"
              width="400"
              v-model:visible="scope.row.visible">
            <!-- 地点 展示状态-->
            <div v-if="!scope.row.isEdit">
              <p>补充说明: {{ scope.row.others }}</p>
            </div>
            <!-- 地点 编辑状态
            Vue3 将 slot=""用法改为了 #
            -->
            <div v-if="scope.row.isEdit">
              <el-input placeholder="请输入内容" v-model="scope.row.others"  clearable style="margin-top: 5px">
                <template #prepend>补充说明</template>
              </el-input>
              <div style="text-align: right; margin-top: 5px">
                <el-button type="info" @click="show(scope.row)">取消</el-button>
                <el-button type="primary" @click="scope.row.isEdit = false">确定</el-button>
              </div>
            </div>
            <!-- popover 默认展示的部分
            通常我们使用 #reference 来放置我们的触发元素
            v-popover 将被废弃，请使用 virtual-ref 作为替代
            -->
            <template #reference>
              <div>
                <!-- 标签元素-->
                <el-tag v-if="!scope.row.isEdit">{{ scope.row.project }}</el-tag>
                <el-col :span="12" :offset="6" v-if="scope.row.isEdit">
                  <el-input placeholder="请输入内容" v-model="scope.row.project" clearable ></el-input>
                </el-col>
              </div>
            </template>
          </el-popover>
        </template>
      </el-table-column>
      <el-table-column label="操作" fixed="right" width="260px" align="center">
        <template #default="scope">
          <el-button
              type="warning"
              @click="handleEditRow(scope.$index, scope.row)"
          >{{scope.row.isEdit ? "确定" : "编辑"}}</el-button>
          <el-button
              type="danger"
              @click.native.prevent="handleDeleteRow(scope.$index, projectExperience.data)"
          >删除</el-button>
          <el-button
              v-if="scope.$index === projectExperience.data.length - 1"
              type="success"
              @click="handleAddRow"
          >新增</el-button>
        </template>
      </el-table-column>
    </el-table>
  </el-form-item>
</template>

<script setup>
import {reactive} from "vue";

// proxy 代替了 this
const { proxy } = getCurrentInstance();

//时间范围选择
const pickerOptions = reactive({
  shortcuts: [{
    text: '最近一周',
    onClick(picker) {
      const end = new Date();
      const start = new Date();
      start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
      picker.$emit('pick', [start, end]);
    }
  },
    {
      text: '最近一个月',
      onClick(picker) {
        const end = new Date();
        const start = new Date();
        start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
        picker.$emit('pick', [start, end]);
      }
    },
    {
      text: '最近三个月',
      onClick(picker) {
        const end = new Date();
        const start = new Date();
        start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
        picker.$emit('pick', [start, end]);
      }
    }]
})

const props = defineProps({
  projectExperience: {
    type: Object
  }
})

// 项目经历数组新增一个数据
function handleAddRow() {
  props.projectExperience.data.push({
    project: '待编辑',
    others:'无',
    time: '',
    isEdit: false,
    visible: false
  });
}

// 当前行项目经历数据 row提供了当前行对应数据的set方法进行响应式修改数据
function handleEditRow(index, row) {
  // this.$set(row, "isEdit", true);
  //console.log(row)
  row.isEdit = !row.isEdit
  //console.log(row)
}

// 删除当前行 并且将当前行对应的数据也删除(数组元素的删除)
function handleDeleteRow(index, data) {
 data.splice(index, 1);
}

// el popover 的显示与隐藏
function show(row){
  row.visible = !row.visible
  row.isEdit = !row.isEdit
}
</script>

<style scoped>

</style>
